<template>
	<view class="topic-nav">
		<view class="uflex-a-j_sbc">
			<view class="">
				热门分类
			</view>
			<view class="uflex-a-j_fsc" @tap="openTopicNav">
				更多<text class="icon iconfont icon-jinru"></text>
			</view>
		</view>
		<view class="uflex-a-j_fsc">
			<block v-for="(item, index) in nav" :key="index">
				<text class="uflex-a-j_c">
					{{item.name}}
				</text>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			nav: Array
		},
		methods: {
			openTopicNav(){
				uni.navigateTo({
					url: '../../pages/topic-nav/topic-nav',
					animationType: 'slide-in-top'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.topic-nav{
		border-top: 1upx solid #eee;
		border-bottom: 1upx solid #eee;
		padding: 20upx;
		> view{
			&:first-of-type{
				margin-bottom: 10upx;
				> view{
					color:#9e9e9e;
					&:first-of-type{
						color: #333;
						font-size: 32upx;
					}
				}
			}
			&:last-of-type{
				>text{
					flex: 1;
					background-color: #ddd;
					color: #9e9e9e;
					padding: 8upx 0;
					box-sizing: border-box;
					border-radius: 10upx;
					margin: 0 10upx;
				}
			}
		}
	}
</style>
